<template>
  <div style="padding-left: 20%; padding-top: 8%;">
    <el-row style="align-items: center">
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }" class="card" style="background-color: #67C23A">
          <div class="cardNum">
            <span class="fontSize">{{homeInfo.spotTotalNumber}}</span>
            <span style="float: bottom">个</span>
          </div>
          <div style="height: 2px; background-color: #eaeaea"></div>
          <div class="cardName">
            <span>广告位总数</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 100px">
        <el-card :body-style="{ padding: '0px' }" class="card" style="background-color: #409EFF">
          <div class="cardNum">
            <span class="fontSize">{{homeInfo.spotFreeNumber}}</span>
            <span style="float: bottom">个</span>
          </div>
          <div style="height: 2px; background-color: #eaeaea"></div>
          <div class="cardName">
            <span>空闲的广告位数</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="align-items: center; padding-top: 50px;">
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }" class="card" style="background-color: #F56C6C">
          <div class="cardNum">
            <span class="fontSize">{{homeInfo.spotInUse}}</span>
            <span style="float: bottom">个</span>
          </div>
          <div style="height: 2px; background-color: #eaeaea"></div>
          <div class="cardName">
            <span>使用中的广告位数</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 100px">
        <el-card :body-style="{ padding: '0px' }" class="card" style="background-color: #909399">
          <div class="cardNum">
            <span class="fontSize">{{homeInfo.spotRepair}}</span>
            <span style="float: bottom">个</span>
          </div>
          <div style="height: 2px; background-color: #eaeaea"></div>
          <div class="cardName">
            <span>待维修的广告位数</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import homeApi from '@/api/login/home'
export default {
  name: 'home',
  data () {
    return {
      homeInfo: [] // 广告位统计信息
    }
  },
  // 页面创建时，获取广告位统计信息
  created: function () {
    homeApi.getHomeInfo().then(data => {
      this.homeInfo = data
    })
  }
}
</script>

<style scoped>
  .card {
    width: 150px;
    border-radius: 30px;
    font-style: revert;
    color: #eaeaea;
  }

  .cardNum {
    height: 81px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }

  .cardName {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }

  .fontSize {
    font-size: 50px;
    padding-right: 20px;

  }
</style>
